---
import { Markdown } from 'astro/components';
import { Menu } from './Menu.jsx';
import { Button } from './Button.jsx';

const name = 'Seasoned snoot booper';

const sandwichIdeas = [
    'HAMstack testttt!!',
    'Ruby Reuben 1',
    'Steamed YAMLs',
    'Crispy-fried Steak Sandwich (CSS)',
    'Toast',
];
---
<article>
    <div class="banner">
        <p><strong>🧑‍🚀 {name}?</strong> Delete this file. Have fun!</p>
    </div>

    <section>
        <Markdown>
            ## Please enjoy a sandwich
        </Markdown>

        <Menu ideas={sandwichIdeas} />

       <Button client:visible />
        
    </section>
    
</article>

<style>
    article {
        padding-top: 2em;
        line-height: 1.5;
    }
    section {
        margin-top: 2em;
        display: flex;
        flex-direction: column;
        gap: 1em;
        max-width: 70ch;
    }

    .banner {
        text-align: center;
        font-size: 1.2rem;
        background: var(--color-light);
        padding: 1em 1.5em;
        padding-left: 0.75em;
        border-radius: 4px;
    }

    pre,
    code {
        font-family: var(--font-mono);
        background: var(--color-light);
        border-radius: 4px;
    }

    pre {
        padding: 1em 1.5em;
    }

    .tree {
        line-height: 1.2;
    }

    code:not(.tree) {
        padding: 0.125em;
        margin: 0 -0.125em;
    }
</style>
